<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>MultiLang Admin</title>
    <link href="/static/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="/docs/css/style.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2563eb;
            --primary-light: #3b82f6;
            --secondary-color: #64748b;
            --bg-color: #f8fafc;
            --card-bg: #ffffff;
            --heading-color: #1e293b;
            --text-color: #64748b;
            --border-radius: 16px;
            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }

        body {
            background-color: var(--bg-color);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .welcome-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        .header-section {
            text-align: center;
            padding: 3rem 0;
            margin-bottom: 3rem;
            background: linear-gradient(135deg, #1e40af, #3b82f6);
            border-radius: var(--border-radius);
            color: white;
        }

        .welcome-icon {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
        }

        .welcome-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .welcome-text {
            font-size: 1.1rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }

        .feature-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .feature-item {
            background: var(--card-bg);
            padding: 2rem;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            transition: transform 0.2s ease;
        }

        .feature-item:hover {
            transform: translateY(-5px);
        }

        .feature-icon {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
            display: inline-block;
            padding: 1rem;
            background: #f0f7ff;
            border-radius: 12px;
        }

        .feature-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--heading-color);
            margin-bottom: 0.75rem;
        }

        .feature-desc {
            color: var(--text-color);
            line-height: 1.6;
        }

        .todo-section {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 2rem;
            box-shadow: var(--shadow);
        }

        .todo-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--heading-color);
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--bg-color);
        }

        .todo-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
        }

        .todo-category {
            background: var(--bg-color);
            padding: 1.5rem;
            border-radius: var(--border-radius);
        }

        .todo-category-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--heading-color);
            margin-bottom: 1.25rem;
            display: flex;
            align-items: center;
        }

        .todo-category-title::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 1.2rem;
            background: #2563eb;
            margin-right: 0.75rem;
            border-radius: 2px;
        }

        .todo-items {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .todo-item {
            display: flex;
            align-items: center;
            padding: 0.75rem 0;
            color: var(--text-color);
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

        .todo-item:last-child {
            border-bottom: none;
        }

        .todo-item i {
            color: #2563eb;
            margin-right: 0.75rem;
            font-size: 0.85rem;
        }

        @media (max-width: 768px) {
            .welcome-container {
                padding: 1rem;
            }

            .header-section {
                padding: 2rem 1rem;
            }

            .welcome-title {
                font-size: 2rem;
            }

            .feature-list, .todo-list {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="welcome-container">
        <div class="header-section">
            <i class="fa fa-cube welcome-icon"></i>
            <h1 class="welcome-title">MultiLang Admin</h1>
            <p class="welcome-text">
                基于 ThinkPHP + Vue3 构建的现代化多语言后台管理系统
            </p>
        </div>

        <div class="feature-list">
            <div class="feature-item">
                <i class="fa fa-language feature-icon"></i>
                <h3 class="feature-title">多语言支持</h3>
                <p class="feature-desc">
                    支持中英日三语切换，可轻松扩展其他语言，实现前后端完整的国际化解决方案。
                </p>
            </div>
            <div class="feature-item">
                <i class="fa fa-shield feature-icon"></i>
                <h3 class="feature-title">权限管理</h3>
                <p class="feature-desc">
                    基于RBAC的权限管理，支持多角色分配，实现细粒度的权限控制和安全管理。
                </p>
            </div>
            <div class="feature-item">
                <i class="fa fa-cloud-upload feature-icon"></i>
                <h3 class="feature-title">文件管理</h3>
                <p class="feature-desc">
                    集成阿里云OSS，提供完整的文件管理解决方案，支持上传、预览和文件夹管理。
                </p>
            </div>
        </div>

        <div class="todo-section">
            <h2 class="todo-title">已实现功能</h2>
            <div class="todo-list">
                <div class="todo-category">
                    <h3 class="todo-category-title">系统功能</h3>
                    <ul class="todo-items">
                        <li class="todo-item">
                            <i class="fa fa-check-circle text-success"></i>
                            管理员账号管理
                        </li>
                        <li class="todo-item">
                            <i class="fa fa-check-circle text-success"></i>
                            角色权限管理
                        </li>
                        <li class="todo-item">
                            <i class="fa fa-check-circle text-success"></i>
                            菜单路由管理
                        </li>
                        <li class="todo-item">
                            <i class="fa fa-check-circle text-success"></i>
                            操作日志记录
                        </li>
                        <li class="todo-item">
                            <i class="fa fa-check-circle text-success"></i>
                            阿里云OSS文件管理
                        </li>
                    </ul>
                </div>

                <div class="todo-category">
                    <h3 class="todo-category-title">多语言功能</h3>
                    <ul class="todo-items">
                        <li class="todo-item">
                            <i class="fa fa-check-circle text-success"></i>
                            语言管理配置
                        </li>
                        <li class="todo-item">
                            <i class="fa fa-check-circle text-success"></i>
                            多语言数据字典
                        </li>
                        <li class="todo-item">
                            <i class="fa fa-check-circle text-success"></i>
                            字典项多语言
                        </li>
                        <li class="todo-item">
                            <i class="fa fa-check-circle text-success"></i>
                            语言切换功能
                        </li>
                    </ul>
                </div>

                <div class="todo-category">
                    <h3 class="todo-category-title">开发计划</h3>
                    <ul class="todo-items">
                        <li class="todo-item">
                            <i class="fa fa-circle-o"></i>
                            系统配置管理
                        </li>
                        <li class="todo-item">
                            <i class="fa fa-circle-o"></i>
                            站内消息通知
                        </li>
                        <li class="todo-item">
                            <i class="fa fa-circle-o"></i>
                            系统监控面板
                        </li>
                        <li class="todo-item">
                            <i class="fa fa-circle-o"></i>
                            定时任务管理
                        </li>
                        <li class="todo-item">
                            <i class="fa fa-circle-o"></i>
                            WebSocket即时通讯
                        </li>
                        <li class="todo-item">
                            <i class="fa fa-circle-o"></i>
                            代码生成器
                        </li>
                        <li class="todo-item">
                            <i class="fa fa-circle-o"></i>
                            数据库文档生成
                        </li>
                        <li class="todo-item">
                            <i class="fa fa-circle-o"></i>
                            接口文档导出
                        </li>
                        <li class="todo-item">
                            <i class="fa fa-circle-o"></i>
                            单元测试支持
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        window.onload = function() {
            try {
                const parentLoading = window.parent.document.querySelector('.loading-container');
                if (parentLoading) {
                    parentLoading.style.display = 'none';
                }
            } catch (error) {
                console.error('关闭 loading 失败:', error);
            }
        };
    </script>
</body>
</html> 